<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>公告</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- // custom-theme -->
    <!--css links-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--bootstrap-->
    <link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all"/><!--stylesheet-->
    <!-- Favicon-->
    <link rel="shortcut icon" href="../../static/img/favicon.ico">
    <style>
        .contains{
            margin-left: 430px;
            margin-right: 300px;
            margin-top: 30px;
        }
        .img-size{
            height: 28rem;
            width: 100%;
        }
        .text{
            text-align: center;
            padding: 7px;
        }
        .cards{
            border: #6c757d;
            padding-bottom: 10px;
        }
        .pages{
            padding-bottom: 50px;
            margin-left: 350px;
        }
        @media only screen and (min-width: 620px) and (max-width: 930px){
            .contains{
                margin-left: 150px;
                margin-right: 150px;
                margin-top: 30px;
            }
            .img-size{
                height: 20rem;
                width: 100%;
            }
            .pages{
                padding-bottom: 50px;
                margin-left: 200px;
            }
        }
        @media only screen and (max-width: 620px){
            .contains{
                margin-left: 50px;
                margin-right: 50px;
                margin-top: 20px;
            }
            .img-size{
                height: 10rem;
                width: 100%;
            }
            .pages{
                padding-bottom: 50px;
                margin-left: 50px;
            }
        }
    </style>
    <!--//fonts-->
</head>
<body>
<!-- Header -->
<div id="home" class="banner inner-banner-w3l">
    <div class="header-nav">
        <nav class="navbar navbar-default">
            <div class="header-top">
                <div class="navbar-header logo">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <h1>
                        <a class="navbar-brand" href="index.html"><i class="fa  fa-hand-o-right" aria-hidden="true"></i>凌飞羽协</a>
                    </h1>
                </div>
                <!-- navbar-header -->
                <div class="contact-bnr-w3-agile">
                    <ul>
                        <li><i class="fa fa-QQgroup" aria-hidden="true"><i>联系会长</i></i><i class="fa  fa-hand-o-right"
                                                                                          aria-hidden="true"></i><a
                                href="http://wpa.qq.com/msgrd?v=3&amp;uin=2263509062&amp;site=qq&amp;menu=yes"
                                target="_blank">2263509062</a></li>
                        <li><i class="fa fa-QQ" aria-hidden="true"><i>或者点击</i></i><i class="fa  fa-hand-o-right"
                                                                                     aria-hidden="true"></i><a
                                href=" http://qun.qq.com/#jointhegroup/gid/699394424		" target="_blank">加群699394424
                            <!--<img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="" title="凌飞2019精英赛">--></a>
                        </li>
                        <!--<li><i class="fa fa-phone" aria-hidden="true"></i>群号390269361</li>	-->
                    </ul>
                </div>
            </div>
            <div class="collapse navbar-collapse cl-effect-13" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/">主页面</a></li>
                    <li><a href="/index/about">关于我们</a></li>
                    <li><a href="/index/competition">比赛报名</a></li>
                    <li><a href="/index/announce" class="active">公告</a></li>
                    <li><a href="/index/message">个人信息</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>
<div class="contains">
    <table>
        <tr th:each="anns:${announces.list}">
            <td class="cards">
                <div class="card mb-3">
                    <img class="card-img-top img-size" th:src="@{http://cdn.jie12366.xyz/{fileName}(fileName=${anns.picture})}" alt="Card image cap">
                    <div class="card-body">
                        <p class="card-text text" th:text="${anns.content}"></p>
                        <p class="card-text"><small class="text-muted time" th:text="${anns.date}"></small></p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <!--实现分页,page.pageNum是当前页数，page.pages是总页数-->
    <div class="pages">
        <a th:href="@{/index/announce(start = 1)}">首页</a>
        <a th:href="@{/index/announce(start = ${announces.pageNum - 1})}">上一页</a>
        <a th:href="@{/index/announce(start = ${announces.pageNum + 1})}">下一页</a>
        <a th:href="@{/index/announce(start = ${announces.pages})}">尾页</a>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--//js -->
<script src="https://cdn.bootcss.com/smoothscroll/1.4.8/SmoothScroll.min.js"></script>
<!--Scrolling-top -->
<script type="text/javascript" src="../../static/js/move-top.js"></script>
<script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.compatibility.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $().UItoTop({easingType: 'easeOutQuart'});
    });
</script>
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>